<template>
  <div class="device-info w100 h100">
      <div class="data-list" v-for="(item, index) in infoArray" :key="index">
        <div class="list-name">{{item.name}}</div>
        <div class="list-bar">
          <div class="bar-text">{{item.amount}}</div>
          <div class="bar-num" :style="{width: `${item.percent}%`}"></div>
        </div>
        <div class="list-percent">{{item.percent}}%</div>
      </div>
  </div>
</template>

<script>
  import Config from '../../../config'
  export default {
    name: 'DeviceInfo',
    data () {
      return {
        infoArray: [
          {
            name: '在线设备数量',
            amount: 0,
            percent: 0
          }, {
            name: '离线设备数量',
            amount: 0,
            percent: 0
          }, {
            name: '设备状态正常数量',
            amount: 0,
            percent: 0
          }, {
            name: '设备状态异常数量',
            amount: 0,
            percent: 0
          }, {
            name: '警情设备异常数量',
            amount: 0,
            percent: 0
          }
        ]
      }
    },
    props: {
      schedule: {
        type: Number,
        default: 0
      }
    },
    watch: {
      schedule (v1, v2) {
        console.log('该更新了')
        this.refresh()
      }
    },
    methods: {
      refresh () {
        this.getData()
      },
      getData () {
        const url = `${Config.DEVICE_MANAGE_URL}/device_stie_user/count`
        const param = {
          devtype: 'nbiot'
        }
        this.$http.get(url, param)
          .then(data => {
            const total = data.all_count
            this.infoArray[0].amount = data.iemp_online_count
            this.infoArray[0].percent = this.getPercent(this.infoArray[0].amount, total)
            this.infoArray[1].amount = total - data.iemp_online_count
            this.infoArray[1].percent = this.getPercent(this.infoArray[1].amount, total)
            this.infoArray[2].amount = total - data.abnormal_count
            this.infoArray[2].percent = this.getPercent(this.infoArray[2].amount, total)
            this.infoArray[3].amount = data.abnormal_count
            this.infoArray[3].percent = this.getPercent(this.infoArray[3].amount, total)
            this.infoArray[4].amount = data.alert_low_pressure_count
            this.infoArray[4].percent = this.getPercent(this.infoArray[4].amount, total)
          })
          .catch(e => {})
      },
      getPercent (val, total) {
        if (!val) {
          return 0
        }
        return ~~(val / total * 100)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .device-info {
    box-sizing: border-box;
    .data-list {
      font-size: 12px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      .list-name {
        color: #598CC9;
        width: 96px;
        text-align: right;
      }
      .list-bar {
        width: 226px;
        height: 12px;
        line-height: 12px;
        background-color: #193F80;
        border-radius: 6px;
        position: relative;
        .bar-text {
          position: absolute;
          left: 9px;
          color: #fff;
        }
        .bar-num {
          background: linear-gradient(90deg, #0A85E9, #1EF7FF);
          border-radius: 6px;
          height: 100%;
          transition: width 1.5s;
        }
      }
      .list-percent {
        color: #CDECF7;
        width: 25px;
      }
    }
    .data-list:last-child {
      margin-bottom: 0;
    }
  }
</style>
